
<template>
  <div class="systemUserDetail" v-loading="systemUserDetailLoading">
    <div class="title">{{ detailAccount }}的账号详情</div>
    <el-form
      ref="detailForm"
      :model="detailForm"
      size="mini"
      class="detailForm"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="账号：">
        <p class="formInfo userSelect">{{ detailForm.account }}</p>
      </el-form-item>
      <el-form-item label="姓名：">
        <p class="formInfo">{{ detailForm.username }}</p>
      </el-form-item>
      <el-form-item label="出生日期：">
        <p class="formInfo">{{ detailForm.birth }}</p>
      </el-form-item>
      <el-form-item label="手机号：">
        <p class="formInfo">{{ detailForm.phone }}</p>
      </el-form-item>
      <el-form-item label="身份证：">
        <p class="formInfo">{{ detailForm.identity }}</p>
      </el-form-item>
      <el-form-item label="专业：">
        <p class="formInfo">{{ detailForm.profession }}</p>
      </el-form-item>
      <el-form-item label="绑定水站：">
        <el-select
          v-model="detailForm.selectStations"
          style="width: 80%"
          multiple
          placeholder="请选择绑定的水站"
        >
          <el-option
            v-for="station in stations"
            :key="station"
            :label="station"
            :value="station"
          >
          </el-option>
        </el-select>
        <el-button style="margin-left: 12px" @click="selectAll">全选</el-button>
      </el-form-item>
      <el-form-item label="技术职称：">
        <p class="formInfo">{{ detailForm.technicalTitle }}</p>
      </el-form-item>
      <el-form-item label="毕业院校：">
        <p class="formInfo">{{ detailForm.school }}</p>
      </el-form-item>
      <el-form-item label="角色类型">
        <span
          class="formInfo"
          v-for="(role, index) in detailForm.roles"
          :key="index"
          >{{ role }}</span
        >
      </el-form-item>
      <el-form-item label="头像：">
        <img :src="headImg" class="formImg" alt="" />
      </el-form-item>
    </el-form>
    <div class="updatePassword">
      <el-button class="greenBtn" size="mini" @click="bindStation"
        >保存绑定水站</el-button
      >
      <el-button class="greenBtn" size="mini" @click="openUpdate"
        >修改密码</el-button
      >
      <el-button class="greenBtn" size="mini" @click="openUser"
        >编辑用户</el-button
      >
      <el-button size="mini" @click="backList">返回列表</el-button>
    </div>

    <el-dialog :visible.sync="openUpdatePasswordFlag" append-to-body>
      <div slot="title">
        <p>修改密码</p>
      </div>
      <el-form
        :model="updatePasswordForm"
        :rules="updatePasswordFormRules"
        v-loading="updatePasswordLoading"
        size="mini"
        ref="updatePasswordFlag"
        label-width="70px"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="updatePasswordForm.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="updatePasswordForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="identity">
          <el-input v-model="updatePasswordForm.identity"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="updatePasswordForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="updatePasswordForm.newPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openUpdatePasswordFlag = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitUpdatePassword('updatePasswordFlag')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="openUpdateUserFlag" append-to-body>
      <div slot="title">
        <p>编辑用户</p>
      </div>
      <el-form
        :model="updateUserForm"
        :rules="updateUserFormRules"
        v-loading="updateUserLoading"
        size="mini"
        ref="openUpdateUserFlag"
        label-width="80px"
      >
        <el-form-item label="账号" prop="account">
          <el-input v-model="updateUserForm.account" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="updateUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="identity">
          <el-input v-model="updateUserForm.identity"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="updateUserForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="账号状态" prop="isActive">
          <el-switch v-model="updateUserForm.isActive"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openUpdateUserFlag = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitUpdateUser('openUpdateUserFlag')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import posts from "@/plugins/request";
import { updateUser } from "@/http/api.js";
import Crypto from "@/utils/crypto";
export default {
  name: "systemUserDetail",
  data() {
    return {
      msg: "hello systemUserDetail!",
      systemUserDetailLoading: false,
      openUpdatePasswordFlag: false,
      openUpdateUserFlag: false,
      updatePasswordLoading: false,
      updateUserLoading: false,
      detailAccount: "",
      detailForm: {
        selectStations: [],
      },
      updatePasswordForm: {
        account: "",
        phone: "",
        newPassword: "",
        oldPassword: "",
        identity: "",
      },
      updatePasswordFormRules: {
        account: [{ required: true, message: "请填写账号", trigger: "blur" }],
        phone: [{ required: true, message: "请填写手机", trigger: "blur" }],
        newPassword: [
          { required: true, message: "请填写新密码", trigger: "blur" },
        ],
        oldPassword: [
          { required: true, message: "请填写旧密码密码", trigger: "blur" },
        ],
        identity: [
          { required: true, message: "请填写身份证", trigger: "blur" },
        ],
      },
      updateUserFormRules: {
        account: [{ required: true, message: "请填写账号", trigger: "blur" }],
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        identity: [
          { required: true, message: "请填写身份证", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请填写手机", trigger: "blur" }],
      },
      updateUserForm: {
        account: "",
        username: "",
        identity: "",
        phone: "",
        isActive: true,
      },
      stations: [],
    };
  },
  methods: {
    ...mapActions([
      "fetchUserDetail",
      "putUpdatePassword",
      "getStationListName",
    ]),
    openUpdate() {
      this.updatePasswordForm.account = this.detailForm.account;
      this.updatePasswordForm.identity = this.detailForm.identity;
      this.updatePasswordForm.phone = this.detailForm.phone;
      this.openUpdatePasswordFlag = true;
    },
    openUser() {
      this.updateUserForm.account = this.detailForm.account;
      this.updateUserForm.username = this.detailForm.username;
      this.updateUserForm.identity = this.detailForm.identity;
      this.updateUserForm.phone = this.detailForm.phone;
      if (this.detailForm.isActive === 1) {
        this.updateUserForm.isActive = true;
      } else {
        this.updateUserForm.isActive = false;
      }
      this.openUpdateUserFlag = true;
      console.log("this.updateUserForm", this.updateUserForm);
    },
    submitUpdatePassword(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let updatePasswordForm = this.updatePasswordForm;
          if (updatePasswordForm.phone !== this.detailForm.phone) {
            return this.$notify.warning({
              title: "警告",
              message: "手机号和当前用户不一致!!",
            });
          }
          this.updatePasswordLoading = true;
          let result = await this.putUpdatePassword(updatePasswordForm);
          if (result.message !== "success") {
            this.$notify({
              type: "warning",
              title: "提示",
              message: result.info,
            });
          } else {
            this.$notify({
              type: "success",
              title: "成功",
              message: "修改成功！！",
            });
            // debugger
            this.$refs[formName].resetFields();
            this.openUpdatePasswordFlag = false;
            // this.onSubmit()
          }
          this.updatePasswordLoading = false;
        } else {
          return false;
        }
      });
    },
    async submitUpdateUser(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.updateUserLoading = true;
          if (this.updateUserForm.isActive === true) {
            this.updateUserForm.isActive = 1;
          } else {
            this.updateUserForm.isActive = 0;
          }
          this.updateUserForm.identity = Crypto.encrypt(
            this.updateUserForm.identity
          );
          let result = await updateUser(this.updateUserForm);
          if (result.message !== "success") {
            this.$notify({
              type: "warning",
              title: "提示",
              message: result.info,
            });
          } else {
            this.$notify({
              type: "success",
              title: "成功",
              message: "修改成功！！",
            });
            // debugger
            this.$refs[formName].resetFields();
            this.openUpdateUserFlag = false;
            this.systemUserDetailLoading = true;
            this.stations = await posts.fetchAllCandoStation();
            const res = await this.fetchUserDetail(this.detailAccount);
            for (let i = 0; i < res.stations.length; i++) {
              // if(res.stations[i].isCheck === 0) {
              this.detailForm.selectStations.push(res.stations[i].stationId);
              // }
            }
            res.identity = Crypto.decrypt(res.identity);
            this.detailForm = Object.assign(this.detailForm, res);

            this.systemUserDetailLoading = false;
            // this.onSubmit()
          }
          this.updateUserLoading = false;
        } else {
          return false;
        }
      });
    },
    backList() {
      this.$router.push("/system/userAdmin");
    },
    async bindStation() {
      let stations = this.stations;
      let selectStations = this.detailForm.selectStations;
      let isCheckStation = [];

      for (let i = 0; i < stations.length; i++) {
        //绑定1 解绑0
        if (selectStations.includes(stations[i])) {
          isCheckStation.push({
            isBinding: 1,
            stationId: stations[i],
            userId: this.detailForm.id,
          });
        } else {
          isCheckStation.push({
            isBinding: 0,
            stationId: stations[i],
            userId: this.detailForm.id,
          });
        }
      }
      this.systemUserDetailLoading = true;
      const result = await posts.putUserBindStation(isCheckStation);
      if (result.message === "success") {
        this.$notify({
          type: "success",
          title: "成功",
          message: "修改绑定成功！",
        });
        this.getStationListName({ dataType: null });
      } else {
        this.$notify({
          type: "error",
          title: "警告",
          message: result.info,
        });
      }
      this.systemUserDetailLoading = false;
    },
    selectAll() {
      this.detailForm.selectStations = this.stations.map((v) => v);
    },
  },
  async created() {
    this.systemUserDetailLoading = true;
    this.stations = await posts.fetchAllCandoStation();
    this.detailAccount = this.$route.query.account;
    if (!this.detailAccount) {
      return this.$router.push("/system/userAdmin");
    }
    const res = await this.fetchUserDetail(this.detailAccount);
    for (let i = 0; i < res.stations.length; i++) {
      // if(res.stations[i].isCheck === 0) {
      this.detailForm.selectStations.push(res.stations[i].stationId);
      // }
    }
    this.detailForm = Object.assign({}, this.detailForm, res);
    this.detailForm.identity = Crypto.decrypt(this.detailForm.identity);

    this.systemUserDetailLoading = false;
  },
  computed: {
    ...mapGetters({
      userAdminList: "getUserAdminList",
    }),
    headImg() {
      return this.detailForm.photo
        ? "http://47.112.16.168:" + this.detailForm.photo.split(",")[0]
        : "";
    },
  },
};
</script>
<style scoped>
.systemUserDetail {
  background: #fff;
  padding: 0 20px;
  min-height: 100%;
}

.systemUserDetail .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.systemUserDetail .title::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.detailForm .formInfo {
  color: #000;
}
.detailForm .formImg {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #666;
}
.systemUserDetail .userSelect {
  user-select: text;
}
</style>
